<template>
  <el-image :lazy="props.lazy"
            :alt="props.alt"
            :src="getSrc()"
            :preview-src-list="preview ? [getSrc()] : []"
            :style="props.style ? props.style : imgStyle"
            :fit="props.fit"
  >
    <template #error>
      <el-image :alt="props.alt" :src="ImgError" />
    </template>
  </el-image>
</template>

<script setup lang="ts">
import ImgError from "@/assets/image/img_error.png";

const props = defineProps({
  src: {
    type: String,
    default: null
  },
  alt: {
    type: String,
    default: null
  },
  lazy: {
    type: Boolean,
    default: false
  },
  size: {
    type: Number,
    default: 20
  },
  round: {
    type: Boolean,
    default: false
  },
  preview: {
    type: Boolean,
    default: false
  },
  style: {
    type: String,
    default: null
  },
  fit: {
    type: String,
    default: "fill"
  }
})
const imgStyle = {
  width: props.size + "px",
  height: props.size + "px",
  borderRadius: props.round ? "100%" : null
};
const getSrc = () => {
  if (props.src != null && props.src?.length != 0) {
    return props.src;
  } else {
    return "";
  }
}
</script>

<style scoped lang="scss">
</style>